
.channel{width:110px
}
.channel .logo{display:block;width:110px;height:28px;margin-bottom:16px
}
.channel .logo img{width:100%;height:100%
}
.channel .related-header{font-size:24px;line-height:1;font-weight:400;color:#333;margin-bottom:16px;text-align:center
}
.channel-fixed{position:fixed;top:10px;z-index:20
}
.channel-item{display:block;width:110px;height:40px;line-height:40px;text-align:center;color:#444;border-radius:4px;margin-bottom:2px;transition-property:color,background-color
}
.channel-item:visited{color:#444
}
.channel-item:hover{animation-name:hvr-back-pulse;animation-duration:.2s;animation-timing-function:linear;animation-iteration-count:1;background-color:#ed4040;color:white
}
@keyframes hvr-back-pulse{
  0%{background-color:rgba(237,64,64,0.6)
  }
  50%{background-color:rgba(237,64,64,0.76)
  }
}
.channel-item.active{background-color:#ed4040;color:#fff
}
.channel-item.active i{display:inline-block
}
.channel-item i{display:none;color:#fff;font-size:14px;margin-right:6px
}
.channel-item i.channel-refresh{animation:rotating .8s linear 0s infinite
}
@keyframes rotating{
  0%{transform:rotate(0deg)
  }
  50%{transform:rotate(180deg)
  }
  100%{transform:rotate(360deg)
  }
}
.channel-item span{display:inline-block;font-size:16px
}
.channel-more{position:relative;color:#444
}
.channel-more:hover .channel-more-layer{display:block
}
.channel-more-layer{display:none;position:absolute;bottom:0;left:110px;width:230px;z-index:10;background-color:#fff;box-shadow:0 1px 4px 0 rgba(0,0,0,0.12);padding:5px
}
